<template>
  <div class="main">
    <div class="top">
      <div class="top-left">
        <div class="item" :class="[activeNum == 1 ? 'item-active' : '']">用户列表</div>
        <div class="item" style="color: #1666f0" @click="handleAddUser()">
          <img src="@/assets/home/add2.png" />
          添加用户
        </div>
      </div>
      <div class="top-right">
        <div class="text">关键字</div>
        <a-input v-model="dataForm.keyword" style="width: 200px" placeholder="请输入用户名/手机号/邮箱查询" />
        <div class="text">用户等级</div>
        <a-select placeholder="请选择" v-model="dataForm.roleId" style="width: 200px">
          <a-select-option :value="item.id" v-for="item in roleList" :key="item.id">
            {{ item.roleName }}
          </a-select-option>
        </a-select>
        <div class="text">用户状态</div>
        <a-select placeholder="请选择" v-model="dataForm.enableState" style="width: 200px">
          <a-select-option value="1"> 启用 </a-select-option>
          <a-select-option value="2"> 禁用 </a-select-option>
        </a-select>
        <a-button type="primary" style="margin-right: 20px; margin-left: 40px" @click="onSearch">查询</a-button>
        <a-button class="cancel" @click="cancel">重置</a-button>
      </div>
    </div>
    <div>
      <a-table :columns="columns" :data-source="data" :pagination="paginationProps">
        <template slot="options" slot-scope="text, record">
          <a @click="handleEnableUser(record.id)">{{ ['禁用', '启用'][record.enableState - 1] }}</a>
          <a style="margin-left: 24px" @click="handleEdit(text, record)">编辑</a>
        </template>
      </a-table>
    </div>
    <MyModal :visible="visible" :width="500" :title="title" @handleCancel="handleCancel">
      <template #dialogBox>
        <UserDiag :visible="visible" ref="myForm" :defaultInfo="defaultInfo" @cancel="handleCancel" />
      </template>
    </MyModal>
  </div>
</template>

<script>
import MyModal from '@/components/MyModal';
import UserDiag from './UserDiag';
import { getRole, getSysUser, enableUser } from '@/api/user.js';

export default {
  components: { MyModal, UserDiag },
  data() {
    return {
      visible: false,
      activeNum: 1,
      dataForm: {
        roleId: undefined, //角色等级
        enableState: undefined, //启用状态；1.启用 2.禁用
        keyword: ''
      },
      data: [],
      defaultInfo: {},
      roleList: [],
      columns: [
        {
          title: '序号',
          customRender: (text, record, index) => `${index + 1}`
        },
        {
          title: '用户名',
          dataIndex: 'userName',
          key: 'userName'
        },
        {
          title: '手机号',
          dataIndex: 'userAccount',
          key: 'userAccount'
        },
        {
          title: '邮箱',
          dataIndex: 'email',
          key: 'email'
        },
        {
          title: '用户等级',
          dataIndex: 'roleName',
          key: 'roleName'
        },
        {
          title: '添加时间',
          key: 'createTime',
          dataIndex: 'createTime'
        },
        {
          title: '操作',
          dataIndex: 'options',
          scopedSlots: { customRender: 'options' }
        }
      ],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      title: '新增'
    };
  },
  computed: {
    // 分页参数
    paginationProps() {
      const _this = this;
      return {
        showQuickJumper: true, // 是否显示快速跳转
        showSizeChanger: true, // 是否显示修改页面展示条数
        pageSizeOptions: ['10', '20', '40', '80', '100'], //可切换每叶数据条数
        current: _this.currentPage, // 当前第几页
        pageSize: _this.pageSize, // 每页显示条数
        total: _this.total, // 数据总数
        showTotal: (total, range) => {
          return '共' + total + '条';
        },
        onChange(page, pageSize) {
          // 切换页码
          _this.currentPage = page;
          _this.initData();
        },
        onShowSizeChange(current, size) {
          // 切换每页显示条数
          _this.pageSize = size;
          _this.initData();
        }
      };
    }
  },
  mounted() {
    this.getRole();
    this.initData();
  },
  methods: {
    getRole() {
      getRole().then(res => {
        this.roleList = res.data;
      });
    },
    initData() {
      const params = {
        ps: this.pageSize,
        pn: this.currentPage,
        ...this.dataForm
      };
      getSysUser(params).then(res => {
        this.data = res.data.records;
        this.total = res.data.total;
      });
    },
    cancel() {
      this.dataForm.roleId = undefined; //角色等级
      this.dataForm.enableState = undefined;
      this.dataForm.keyword = '';
      this.initData();
    },
    onSearch() {
      this.initData();
    },
    handleCancel(type) {
      if (type) {
        this.initData();
      }
      this.$refs.myForm.resetFields();
      this.visible = false;
    },
    handleAddUser() {
      this.defaultInfo = {
        userName: '',
        userAccount: '',
        email: '',
        roleId: undefined
      };
      this.title = '添加用户';
      this.visible = true;
    },
    handleEdit(text, record) {
      this.defaultInfo = record;
      this.title = '编辑用户';
      this.visible = true;
    },
    handleEnableUser(id) {
      enableUser(id).then(res => {
        if (res.code == 0) {
          this.$message.success('修改成功');
          this.initData();
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.main {
  width: 100%;
  height: 100%;
  color: #fff;
  .top {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .top-left {
      display: flex;
      background-color: rgba(22, 102, 240, 0.2);
      padding: 4px;

      .item {
        padding: 10px 40px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        img {
          width: 22px;
          height: 22px;
        }
      }
      .item-active {
        background-color: #1666f0;
      }
    }
    .top-right {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .text {
        margin: 0 12px 0 24px;
      }
      .cancel {
        color: #fff;
        background: rgba(22, 102, 240, 0.2);
        border-color: rgba(22, 102, 240, 0.2);
      }
    }
  }
}
.main ::v-deep .ant-table-body {
  max-height: calc(100vh - 320px);
  // min-height: calc(100vh - 320px);
  overflow-y: auto;
}
.main ::v-deep .ant-table-placeholder {
  background: rgba(22, 102, 240, 0.2);
}
.main ::v-deep .ant-empty-normal {
  color: #fff;
}
</style>
